<!DOCTYPE html>
<html lang="zh-CN">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <meta charset="utf-8">
    <title>安全协议设计工具</title>
    <link rel="stylesheet" type="text/css" href="css/identify.css"/>
    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="css/account.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/control_index.css"/>

    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <link rel="stylesheet" type="text/css" href="css/typeWriter.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
    <link rel="stylesheet" type="text/css" href="css/protocolReport.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>

    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>


    <script src="js/jquery-1.7.2.min.js"></script>
    <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <script type="text/javascript" src="js/haidao.offcial.general.js"></script>
    <script type="text/javascript" src="js/select.js"></script>
    <script type="text/javascript" src="js/haidao.validate.js"></script>
	
    <style type="text/css">

        .my-table tr:hover {
            background: #f9f9f9;
        }

        .cancel {
            width: 60px;
            height: 30px;
            color: black;
            border: 1px solid #acacac;
            text-align: center;
            line-height: 30px;
            color: #fff;
            display: inline-block;
            border-radius: 5px;
            margin: 20px;
        }

        .validate {
            width: 60px;
            height: 30px;
            background: #40BEA6;
            text-align: center;
            line-height: 30px;
            color: #fff;
            display: inline-block;
            border-radius: 5px;
            margin: 20px;
        }

        .tab {
            overflow: hidden;
            border-left: 1px solid #ECECEC;
            border-right: 1px solid #ECECEC;
            border-top: 1px solid #ECECEC;
            background-color: #f5f5f5;
        }

        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            color: #848484;
        }

        .tab button:hover {
            color: #112233;
            background: #FFFFFF;
        }

        .tab button.active {
            color: #112233;
            background: #FFFFFF;
            border-top: none;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        .tabcontent {
            display: none;
            padding: 20px;
            border: 1px solid #ECECEC;
            border-top: none;
        }

        .desc {
            height: 60px;
            line-height: 60px;
            margin: 0px;
            text-align: center;
        }

        .desc .line {
            display: inline-block;
            width: 300px;
            /*margin: 0px;*/
            border-top: 1px solid #ECECEC;
        }

        .desc .line:first-child {
            /*display: inline-block;*/
            /*width: 50px;*/
            /*border-top: 1px solid #ccc ;*/
        }

        .desc .txt {
            color: #686868;
            vertical-align: middle;
        }
        #changeBtn {
            float: left;
        }
        #saveBtn {
            float: left;
        }
        #stopBtn{
            float: left;
        }
        #reportBtn {
            float: left;
        }
        .btn {
            position: relative;
            width: 180px;
        }
    </style>
</head>

<body style="padding: 0px;">
<div class="view-topbar">
    <div class="topbar-console">
        <div class="tobar-head fl">
            <a href="#" class="topbar-home-link topbar-btn text-center fl">
                <img src="images/dwlogo.png"  class="logoimg"/>
            </a>
            <div  class="mynav" >
                <span>电力监控协议安全设计工具</span>
            </div>
        </div>
    </div>
    <div class="topbar-info">
        <ul class="fr">
            <li class="fl topbar-info-item">
                <div class="dropdown">
                    <a href="#" class="topbar-btn">
                        <span class="fl text-normal"><span class="username"></span> </span>
                        <span class="icon-arrow-down"></span>
                    </a>
                    <ul class="dropdown-menu topbar-btn-fontsize">
                        <li>
                            <a id="logout">退出</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="view-body">
    <div class="view-sidebar">
        <div class="sidebar-content">
            <div class="sidebar-nav sidebar-nav-fold operator-nav">
                <div class="sidebar-title ">
                    <a href="javascript:void(0)" id="viewProtocol">
                        <span class="icon"><b class="fl icon-arrow-down"></b></span>
                        <span class="text-normal">协议预览</span>
                    </a>
                </div>
                <ul class="sidebar-trans" >
                    <li id="preview101">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC60870-5-101</span>
                        </a>
                    </li>
                    <li id="preview104">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC60870-5-104</span>
                        </a>
                    </li>
                    <li id="previewgoose">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC61850-GOOSE</span>
                        </a>
                    </li>
                    <li id="previewsv">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC61850-SV</span>
                        </a>
                    </li>
                    <li id="previewmms">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC61850-MMS</span>
                        </a>
                    </li>
                    <li id="previewdnp3">
                        <a href="previewDNP3.html">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">DNP3</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="sidebar-nav operator-nav">
                <div class="sidebar-title">
                    <a href="#" id="designProtocol">
                        <span class="text-normal ml-5 mloader" >协议设计</span>
                    </a>
                </div>
            </div>

            <div class="sidebar-nav operator-nav">
                <div class="sidebar-title">
                    <a href="#" id="testProtocol" >
                        <span class="text-normal ml-5">协议测试</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="view-product" style="background: #F5F5F5;">

        <div class="content-header">
            <ol class="breadcrumb">
                <li><a href="index.html" title="返回主页"><i class="fa fa-home"></i> 主页</a></li>
                <li><a href="test.html" title="返回测试列表">测试列表</a></li>
                <li><a href="testInstChoose.html" title="返回选择列表">选择列表</a></li>
                <li>测试配置</li>
            </ol>
        </div>

        <div class="content-body"
             style="margin: 20px;padding:20px;border-top: 3px solid #40bea6; border-radius: 3px; background: #fff;">
            <div class="desc" style="margin-bottom: 20px">
                <span class="line"></span>
                <span class="txt">请选择并配置您要测试的模块</span>
                <span class="line"></span>
            </div>
            <!--<h1 style="margin-bottom: 20px">请选择并配置您要测试的模块</h1>-->
            <div class="tab">
                <button class="tablinks" onclick="openTab(event, 'authNegoTab')" id="authNegoBtn"><i
                        class="fa fa-handshake-o fa-lg"></i> 认证协商
                </button>
                <button class="tablinks" onclick="openTab(event, 'encryptNegoTab')" id="encryptNegoBtn"><i class="fa fa-key fa-lg"></i> 加密协商</button>
                <button class="tablinks" onclick="openTab(event, 'exceptionTab')" id="exceptionBtn"><i class="fa fa-wrench fa-lg"></i> 异常检测
                </button>
                <button class="tablinks" onclick="openTab(event, 'integrityTab')" id="integrityBtn"><i class="fa fa-paint-brush fa-lg"></i>
                    完整性校验
                </button>
				<button class="tablinks" onclick="openTab(event, 'encryptTab')" id="encryptBtn"><i class="fa fa-key fa-lg"></i>加密</button>
                <button class="tablinks" onclick="openTab(event, 'resendTab')" id="resendBtn"><i class="fa fa-upload fa-lg"></i> 通信重传
                </button>
                <button class="tablinks" onclick="openTab(event, 'virusTab')" id="virusBtn"><i class="fa fa-shield fa-lg"></i> 防病毒设计
                </button>

            </div>

            <div id="authNegoTab" class="tabcontent">
                <span class="func_toggle" style="margin-right: 20px">功能测试次数：
                    <!--<select id="authNegoOpen">-->
                    <select id="authNegoTNum">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </span>

                <span class="time" style="margin-right: 20px">
                    容忍时间上限：
                    <input id="authNegoTime" type="text"
                           style="min-width: 20px;max-width: 50px;border: 1px solid #ececec;" onblur="checkLimitTime('authNegoTime')">&nbsp;ms
                </span>
                <span class="attack" style="margin-right: 20px">
                    攻击开启：
                    <select name="" id="authNegoAttackOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>
                </span>
                <!--<span style="margin-right: 20px">
                    测试次数
                    <select style="margin-right: 20px;">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                    </select>
                </span>-->
            </div>
            <div id="encryptNegoTab" class="tabcontent">
                <span class="func_toggle" style="margin-right: 20px">功能测试次数：
                    <!--<select id="encryptNegoOpen" onchange="encryptNegoChangeFunc()">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>-->
                    <select id="encryptNegoTNum">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </span>

                <span class="time" style="margin-right: 20px">
                    容忍时间上限：
                    <input id="encryptNegoTime" type="text"
                           style="min-width: 20px;max-width: 50px;border: 1px solid #ececec;" onblur="checkLimitTime('encryptNegoTime')">&nbsp;ms
                </span>
                <span class="attack" style="margin-right: 20px;display: none">
                    攻击开启：
                    <select name="" id="encryptNegoAttackOpen">
                        <option value="N">N</option>
                    </select>
                </span>
                <!--<span style="margin-right: 20px">
                    测试次数
                    <select style="margin-right: 20px;">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                    </select>
                </span>-->
            </div>
			<div id="encryptTab" class="tabcontent">
			    <span class="func_toggle" style="margin-right: 20px">功能测试次数：
			        <!--<select id="encryptOpen" onchange="encryptChangeFunc()">
			            <option value="Y">Y</option>
			            <option value="N">N</option>
			        </select>-->
                    <select id="encryptTNum">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
			    </span>
			
			    <span class="time" style="margin-right: 20px">
			        容忍时间上限：
			        <input id="encryptTime" type="text"
			               style="min-width: 20px;max-width: 50px;border: 1px solid #ececec;" onblur="checkLimitTime('encryptTime')">&nbsp;ms
			    </span>
                <span class="attack" style="margin-right: 20px">
                    攻击开启：
                    <select name="" id="encryptAttackOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>
                </span>
			    <!--<span style="margin-right: 20px">
			        测试次数
			        <select style="margin-right: 20px;">
			            <option value="">1</option>
			            <option value="">2</option>
			            <option value="">3</option>
			            <option value="">4</option>
			            <option value="">5</option>
			        </select>
			    </span>-->
			</div>
            <div id="exceptionTab" class="tabcontent">
                <span class="func_toggle" style="margin-right: 20px">功能测试次数：
                    <!--<select id="exceptionOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>-->
                    <select id="exceptionTNum">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </span>

                <span class="time" style="margin-right: 20px">
                    容忍时间上限：
                    <input id="exceptionTime" type="text"
                           style="min-width: 20px;max-width: 50px;border: 1px solid #ececec;" onblur="checkLimitTime('exceptionTime')">&nbsp;ms
                </span>
                <span class="attack" style="margin-right: 20px">
                    攻击开启：
                    <select name="" id="exceptionAttackOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>
                </span>
                <!--<span style="margin-right: 20px">
                    测试次数
                    <select style="margin-right: 20px;">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                    </select>
                </span>-->
            </div>
            <div id="virusTab" class="tabcontent">
                <span class="func_toggle" style="margin-right: 20px">功能测试次数：
                    <!--<select id="virusOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>-->
                    <select id="virusTNum">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </span>

                <span class="time" style="margin-right: 20px">
                    容忍时间上限：
                    <input id="virusTime" type="text"
                           style="min-width: 20px;max-width: 50px;border: 1px solid #ececec;" onblur="checkLimitTime('virusTime')">&nbsp;ms
                </span>
                <span class="attack" style="margin-right: 20px">
                    攻击开启：
                    <select name="" id="virusAttackOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>
                </span>
                <!--<span style="margin-right: 20px">
                    测试次数
                    <select style="margin-right: 20px;">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                    </select>
                </span>-->
            </div>
            <div id="resendTab" class="tabcontent">
                <span class="func_toggle" style="margin-right: 20px">功能测试次数：
                    <!--<select id="resendOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>-->
                    <select id="resendTNum">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </span>

                <span class="time" style="margin-right: 20px">
                    容忍时间上限：
                    <input id="resendTime" type="text"
                           style="min-width: 20px;max-width: 50px;border: 1px solid #ececec;" onblur="checkLimitTime('resendTime')">&nbsp;ms
                </span>

                <span class="attack" style="margin-right: 20px">
                    攻击开启：
                    <select name="" id="resendAttackOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>
                </span>
                <!--<span style="margin-right: 20px">
                    测试次数
                    <select style="margin-right: 20px;">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                    </select>
                </span>-->
            </div>
            <div id="integrityTab" class="tabcontent">
                <span class="func_toggle" style="margin-right: 20px">功能测试次数：
                    <!--<select name="" id="integrityOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>-->
                    <select id="integrityTNum">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </span>

                <span class="time" style="margin-right: 20px">
                    容忍时间上限：
                    <input id="integrityTime" type="text"
                           style="min-width: 20px;max-width: 50px;border: 1px solid #ececec;" onblur="checkLimitTime('integrityTime')">&nbsp;ms
                </span>

                <span class="attack" style="margin-right: 20px">
                    攻击开启：
                    <select name="" id="integrityAttackOpen">
                        <option value="Y">Y</option>
                        <option value="N">N</option>
                    </select>
                </span>

                <!--<span style="margin-right: 20px">
                    测试次数
                    <select style="margin-right: 20px;">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                    </select>
                </span>-->
            </div>
            <div id="changeBtn" style="margin-top: 20px;margin-bottom: 20px;display: inline">
                <p id="changeModel" class="button text-white btn" style="background:#40BEA6"><i class="fa fa-exchange fa-lg"></i>&nbsp;网桥/路由</p>
            </div>
            <div id="saveBtn" style="margin-top: 20px;margin-bottom: 20px;margin-left:50px;display: inline">
                <p id="saveOp" class="button text-white btn" style="background:#40BEA6"><i class="fa fa-toggle-right fa-lg"></i>&nbsp;测试</p>
            </div>
            <div id="stopBtn" style="margin-top: 20px;margin-bottom: 20px;margin-left:50px;display: inline">
                <p id="stopOp" class="button text-white btn" style="background:#85e5d3"><i class="fa fa-stop fa-lg"></i>&nbsp;停止</p>
            </div>
            <div id="reportBtn" style="margin-top: 20px;margin-bottom: 20px;margin-left:50px;display: inline">
                <p id="reportP" class="button text-white btn" style="background:#85e5d3"><i class="fa fa-search fa-lg"></i>&nbsp;查看测试报告</p>
            </div>


            <!--<div style="margin-top: 20px;margin-bottom: 10px;font-size: 20px;">信息</div>-->
            <section id="typeWriter" style="background: #000; height: 300px; margin: 0px;padding: 20px;overflow: auto;">

            </section>
            <!-- 测试报告模态框 -->
            <div id="rbody"></div>
            <!--<div  style="margin-top: 20px">
                <p id="saveReport" class="button btn-orange text-white btn" style="background:#40BEA6"><i class="fa fa-save fa-lg"></i>&nbsp;保存测试报告</p>
            </div>-->

        </div>

    </div>
</div>



<script src="js/typewriter.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/service.js"></script>
<script type="text/javascript" src="js/testConfig.js"></script>
<script type="text/javascript" src="js/testReports.js"></script>
<script>
    checkRole('operator');
    $(function(){
        $.get("topbar.html",function (data) {
            $(".view-topbar").empty();
            $(".view-topbar").html(data);
        });
        $.get("siderbar.html", function(data) {
            $(".view-sidebar").html(data);
            $("#testProtocol").css("background","#40BEA6");
        });
    });
	listConfigInfo(paramConfigId);

    /*$("#saveOp").on("click", function () {
		reqTest();
    })*/
    $("#changeModel").on("click",changeConModel);
    $("#saveOp").on("click",reqTest);

    //$("#saveReport").on("click",saveTestReport);


</script>
</body>

</html>
